<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function(){

            var ctx = document.getElementById('canvas').getContext('2d');
            ctx.lineWidth = 2;
            ctx.strokeStyle = 'black';

//            //坐标变换
//            //(x,y);
//            ctx.moveTo(20,20);
//            ctx.lineTo(100,20);
//            ctx.stroke();
//            ctx.closePath();

//            //坐标变换(原来原点的x+100,原来的原点的Y+100)
//            ctx.translate(100,100);
//            ctx.moveTo(20,20);
//            ctx.lineTo(100,20);
//            ctx.stroke();
//            ctx.closePath();


//            //scale 缩放
//            ctx.strokeRect(20,20,20,20);
//            //0--1  0.5
//            //1--    倍
//            ctx.scale(2,4);
//            ctx.strokeRect(20,20,20,20);

            //旋转
//            ctx.beginPath();
//            ctx.moveTo(0,0);
//            ctx.lineTo(100,0);
//            ctx.stroke();
//            ctx.closePath();
//
//            //相当于画布   绕着原点旋转90度  (-   逆时针)
//            ctx.rotate(Math.PI/2);//90°
//            ctx.beginPath();
//            ctx.moveTo(0,0);
//            ctx.lineTo(100,0);
//            ctx.stroke();
//            ctx.closePath();


            //渐变色
            ctx.beginPath();
            ctx.arc(200,200,100,0,Math.PI*2);

            //(内圆(x,y,r) 外圆(x,y,r))
            var color = ctx.createRadialGradient(200,200,0,200,200,100);
            color.addColorStop(0,'yellow');
            color.addColorStop(0.5,'red');
            color.addColorStop(1,'green');
            ctx.fillStyle = color;
            ctx.fill();
        }
    </script>


</head>
<body>
<canvas width="800" height="1000" id="canvas" style="background-color: antiquewhite">
浏览器不支持canvas
</canvas>
</body>
</html>